<template>
	<view class="w-100 bottom-index min-h-100">
		<!-- 加载中蒙版 -->
<!--		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>-->
		<!-- 背景 -->
		<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/pagea-bg.jpg"
			class="img-bg w-100 ">
		</image>
		<view
			:style="{position:'sticky',height:menuObject.height + menuObject.top +8 + 'px',width:'100%',zIndex:'2',opacity: topBacOpacity || 0,top:0}"
			class="bac-col-f w-100"></view>
		<!-- 今日天气 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="flex-dir-row ml-20 pos-fixed"
			:style="{ top: menuObject.top -3 + 'px', opacity: iconOpacity ,zIndex:9}">
			<image @click="$NavigateTo('/qmy_user/user/myPage')" :src="userInfo.avatar
				      ? userInfo.avatar 
				      : 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
				mode="aspectFill" class="br-200"
				:style="{height:menuObject.height + 6 + 'px',width:menuButtonObject.height+ 6 + 'px',border:'4rpx solid #fff'}">
			</image>
			<view class="fs-26 ml-10">
				<view class="">{{userInfo.nickname?userInfo.nickname + ',您好' : '您好'}}</view>
				<view class="flex-dir-row ali-item-cen fs-22">
					<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/tq_q.png"
						class="img-25"></image>
					<text class="ml-5">{{weatherData.data?weatherData.data[1].weather:'多云'}}</text>
					<text class="ml-5">|</text>
					<text class="ml-5">{{weatherData.data?weatherData.data[1].temperature:'16~24'}}℃</text>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- 搜索框 -->
		<view class="search col-0a2e36 flex-dir-row ali-item-cen w-100"
			:style="{ top: menuButtonObject.top + 'px',width: searchWidth + 'rpx' ,height:menuButtonObject.height+'px',position:searchPosition,background: iconOpacity == 0?'#0a2e360a':'#fff'}">
			<text class="iconfont ic-sousuo col-00ba31 fs-40 mr-10"></text>
			<input class="fs-24 w-100" type="text" confirm-type="search" v-model="searchText" placeholder="点击搜索活动"
				placeholder-style="color:#0a2e365e" @confirm="fuzzySearch" />
			<text v-if="searchText.length" class="iconfont  ic-qingchu fs-40 col-0a2e36" @click="clearIcon" />
		</view>
		<!-- 城市选择 -->
		<!-- <unicloud-city-select ref="citySelect" :hot-city="hotCity" :location="false"
			@select="select"></unicloud-city-select> -->
		<view class="w-100 mt-20" style="overflow-x: hidden;">
		 <view class="ping-20 ">
				<z-swiper v-model="bannerList" :options="options">
					<z-swiper-item v-for="(item,index) in bannerList" :key="index">
						<image @click="$NavigateTo(`../detail/detail?id=${item.toDetailId}`)" class="image br-20"
							:src="item.imageUrl"
							mode="aspectFill"> </image>
					</z-swiper-item>
				</z-swiper>
			</view>
			<view v-if="recommendActivityData" class="w-100 ping-30 pb-0 recommend-section">
				<view class="section-header flex-dir-row ali-item-cen flex-x-bet">
					<view class="section-title">
						<text class="section-title-text fw-600 fs-30">精选活动</text>
						<view class="title-underline"></view>
					</view>
					<view @click="$NavigateTo(`../list/selected-activity`)"
						class="section-more ali-item-cen fs-24 flex-dir-row">
						<view>查看更多</view>
						<view class="iconfont ic-you fs-28 more-icon"></view>
					</view>
				</view>
				<view class="recommend-items">
					<view @click="$NavigateTo(`../detail/detail?id=${item.id}`)"
						v-for="(item, index) in recommendActivityData" :key="index" class="recommend-item"
						:style="{ animationDelay: index * 0.1 + 's' }">
						<view class="recommend-image-container">
							<image class="recommend-image" :src="item.coverImage" mode="aspectFill"></image>
							<view class="image-overlay"></view>
							<view v-if="item.id" class="gift-badge">
								<text class="iconfont ic-a-074_liwu gift-icon"></text>
							</view>
						</view>
						<view class="recommend-info">
							<view class="recommend-name">{{item.title}}</view>
							<view class="recommend-count">
								<text class="iconfont ic-baoming recommend-icon"></text>
								<text>{{item.registrationParticipants}}人报名</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="w-100 vague-bg-8 mt-30" style="border-top-right-radius: 40rpx;border-top-left-radius: 40rpx;">
				<v-tabs ref="tabs" field="name" height="80rpx" :zIndex="1" bgColor="#ffffff00" fontSize="30rpx"
					boxTop="45rpx" :boxWidth="20" lineHeight="18rpx" pillsStyle="box" activeFontSize="32rpx"
					activeColor="linear-gradient(to right, #000000, #000000)"
					color="linear-gradient(to right, #000000, #000000)" bold
					lineColor="linear-gradient(to right, #14cc60 80%, #ffffff)" :value="current"
					paddingItem="0rpx 20rpx" :tabs="activityTypeList" @change="changeTab"></v-tabs>
				<view class="ping-20 pt-0 pos-rela " style="min-height: 55vh;">
					<!-- <view class="flex-dir-row ali-item-cen fs-26 mt-10 fwrap-wr">
						<view @click="switchCity" class="br-200 state-btn mb-20 text-ali-c mr-20 box-nw text-element-1">
							{{ cityName }}
						</view>
						<view @click="openCalendar"
							class="br-200 state-btn mb-20 text-ali-c mr-20 box-nw text-element-1">
							{{ timeName }}
						</view>
						<view @click="openStatePopup"
							class="br-200 state-btn mb-20 text-ali-c mr-20 box-nw text-element-1">
							{{ stateName }}
						</view>
					</view> -->
					<!-- 如果活动列表为空 -->
					<view v-if="!activityData"
						class="activity-empty-box">
						<image class="activity-empty-image"
							src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/activity-mepty.png"
							mode="scaleToFill" />
						<view class="fs-28" :class="cityName == '全国' ? 'fw-600' : 'col-b1'">暂无活动</view>
						<view v-if="cityName != '全国'" @click="cityName = '全国'" class="fs-28 fw-600 col-00ba31 mt-10">
							切换地区为全国</view>
					</view>
					<view v-else>
						<view v-for="(item, index) in activityData" :key="index"
							class="bac-col-f br-20 ping-20 box-nw"
							:class="index != activityData.length - 1 ? 'mb-20' : ''"
							@click="$NavigateTo(`../detail/detail?id=${item.id}`)">
							<view class="flex-dir-col">
								<view class="fs-28 flex-dir-col flex-x-bet">
									<view class="fs-34 fw-600 text-element-1">{{item.title}}</view>
									<view class="flex-dir-row ali-item-cen overflow-h mt-20">
										<view v-if="item.giftId" class="text-tips bac-col-ffd ali-item-cen">
											<text class="iconfont ic-a-074_liwu fs-30"></text>
											送豪礼
										</view>
										<view v-for="tag in item.tags" :key="tag" class="text-tips bac-col-00b">
											{{tag}}
										</view>
									</view>
									<view class="flex-dir-row ali-item-cen mr-20 mt-10">
										<view class="iconfont ic-shijianxuanzeqi mr-10 col-00ba31"></view>
										<view
											v-if="item.registrationStartTime < Date.now() && item.registrationEndTime > Date.now()">
											{{$formatDate(item.registrationStartTime)}} -
											{{$formatDate(item.registrationEndTime)}}
										</view>
										<view v-else>{{$formatDate(item.startTime)}} -
											{{$formatDate(item.endTime)}}
										</view>
									</view>
									<view class="flex-dir-row ali-item-cen mt-10">
										<view class="iconfont ic-weizhi mr-10 col-00ba31"></view>
										<view class="text-element-1">{{item.location}}</view>
									</view>
								</view>
								<view class="w-100 mt-20 ">
									<!-- 节省轮播资源，提升性能，但图时不用轮播组件 -->
									<view v-if="item.images" class="pos-rela">
										<image class="br-20 w-100 img-210" :src="item.images[0]" mode="aspectFill">
										</image>
										<view class="pos-abso brtl-20 brbr-20  fs-22  ping-6-10"
											style="top: 0;left: 0;z-index: 2;"
											:class="item.registrationStartTime > Date.now()?'bac-col-fa col-0a2e365e':item.registrationStartTime < Date.now() && item.registrationStartTime > Date.now() ? 'bac-col-00b col-f' : item.startTime < Date.now() && item.endTime > Date.now() ? 'bac-col-ffd col-f' : item.startTime > Date.now() ? 'bac-col-4e col-f' : 'bac-col-fa col-0a2e365e'">
											{{item.registrationStartTime > Date.now()?'未开启':item.registrationStartTime < Date.now() && item.registrationEndTime > Date.now() ? '报名中' : item.startTime < Date.now() && item.endTime > Date.now() ? '进行中' : item.startTime > Date.now() ? '待进行' : '已结束'}}
										</view>
									</view>
									<view v-else>
										<z-swiper ref="zSwiper" v-model="item.images" :options="activityImgOptions">
											<z-swiper-item v-for="(image,i) in item.images" :key="i">
												<view class="pos-rela">
													<image class="br-20 w-100 img-210" :src="image" mode="aspectFill">
													</image>
													<view class="pos-abso brtl-20 brbr-20  fs-22  ping-6-10"
														style="top: 0;left: 0;z-index: 2;"
														:class="item.registrationStartTime > Date.now()?'bac-col-fa col-0a2e365e':item.registrationStartTime< Date.now() && item.registrationStartTime > Date.now() ? 'bac-col-00b col-f' : item.startTime < Date.now() && item.endTime > Date.now() ? 'bac-col-ffd col-f' : item.startTime > Date.now() ? 'bac-col-4e col-f' : 'bac-col-fa col-0a2e365e'">
														{{$formatDate(item.registrationStartTime) > Date.now()?'未开启':$formatDate(item.registrationStartTime) < Date.now() && $formatDate(item.registrationStartTime) > Date.now() ? '报名中' : $formatDate(item.startTime) < Date.now() && $formatDate(item.endTime) > Date.now() ? '进行中' : $formatDate(item.startTime) > Date.now() ? '待进行' : '已结束'}}
													</view>
												</view>
											</z-swiper-item>
										</z-swiper>
									</view>

								</view>
							</view>
							<view class="flex-dir-row flex-x-bet ali-item-cen pt-20 mt-20 bor-top-f3">
								<view class="flex-dir-row ali-item-cen  col-b1">
									<view class="flex-dir-row ali-item-cen">
										<image v-for="(usimg,its) in item.registrationUsers.slice(0,4)" :key="its"
											:src="usimg.avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
											:style="{marginLeft: its == 0?0:'-20rpx'}" mode="aspectFill"
											class="img-50 br-200">
										</image>
									</view>
									<view class="ml-10 fs-24">
										{{item.registrationParticipants +'人已报名'}}
									</view>
								</view>
								<view class="fs-26 br-200 text-ali-c fw-600 btn-bg">
									<view class="gradient-text">一起玩</view>
								</view>
							</view>
						</view>
						<!-- <qmy-logo :loading="load"></qmy-logo> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/utils/store.js'
  import { getRecommendActivityListApi, getActivityDataByTypeApi, getActivityPageApi } from "@/api/activity/activity.js"
  import { getBannerListApi } from "@/api/banner/banner.js"
  import { getActivityTypeApi } from "@/api/activity/activityType.js"
	export default {
		name: 'pageA',
		props: {
			scrollTop: {
				type: Number,
				required: 0
			},
			page: {
				type: Number,
				required: 0
			},
			pageSize: {
				type: Number,
				required: 10
			},
			refresh: {
				type: Boolean,
				required: false
			}
		},
		data() {
			return {
        queryData: {},
        bannerType: 'activity',
        limit: 10, // 每页数量
				searchText: '', //搜索内容
				searchWidth: 710, //搜索框宽度
				searchPosition: 'sticky',
				menuButtonObject: {}, //菜单按钮对象
				iconOpacity: 1, // 初始透明度为 1（完全显示）
				topBacOpacity: 0, // 初始透明度为 0（完全隐藏）
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				weatherData: {}, //当前天气数据
				options: { //文档地址https://v2.swiper.zebraui.com/component/
					autoplay: {
						disableOnInteraction: false, //用户手动切换后是否停止
					},
					loop: true, //无限循环
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							origin: 'left center',
							translate: ['-5%', 0, -200],
							rotate: [0, 100, 0],
						},
						next: {
							origin: 'right center',
							translate: ['5%', 0, -200],
							rotate: [0, -100, 0],
						}
					}
				},
				activityImgOptions: {
					loop: false, //无限循环
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							origin: 'left center',
							translate: ['-5%', 0, -200],
							rotate: [0, 100, 0],
						},
						next: {
							origin: 'right center',
							translate: ['5%', 0, -200],
							rotate: [0, -100, 0],
						}
					}
				},
				current: 0, //当前tab索引
				activityTypeList: [], //活动分类
				activeState: 0, //活动状态
				cityName: '全国', //城市名称
				timeName: '时间', //时间名称
				stateName: '状态', //状态名称
				bannerList: [], //轮播图数据
				activityData: [], //活动列表数据
				pageStop: false, //分页是否停止
				dataLoaded: false, //数据是否加载完成
				// 热门城市
				hotCity: [{
						code: "000000",
						name: "全国"
					},
					{
						code: "310100",
						name: "上海"
					},
					{
						code: "330100",
						name: "杭州"
					},
					{
						code: "440100",
						name: "广州"
					},
					{
						code: "440300",
						name: "深圳"
					},
					{
						code: "320100",
						name: "南京"
					},
					{
						code: "500100",
						name: "重庆"
					},
					{
						code: "510100",
						name: "成都"
					}
				],
				before: '', // 开始时间
				after: '', // 结束时间
				stateList: ['全部', '报名中', '进行中', '已结束'],
				load: false, // 是否加载中
				recommendActivityData: [], //精选活动数据
			}
		},
    //页面加载
    mounted() {
      // #ifdef MP-WEIXIN
      this.menuButtonObject = uni.getMenuButtonBoundingClientRect();
      this.menuButtonObject.top = this.menuObject.top + this.menuObject.height + 15;
      // #endif
      // #ifndef MP-WEIXIN
      this.menuButtonObject = 0;
      // #endif
      // 获取banner数据
      this.getBannerData();
      // 获取精选活动数据
      this.getRecommendActivityData();
      // 获取活动1分类
      this.getActivityType();
      // 获取活动数据，默认获取全部
      // this.getActivityDataByType(2, 0);
      // 使用模拟数据，不调用接口
      this.initMockData();
    },
    methods: {
      // 初始化模拟数据
      initMockData() {
        // 模拟天气数据
        this.weatherData = {
          data: [
            {},
            {
              weather: '晴天',
              temperature: '18~25'
            }
          ]
        };

        // 模拟轮播图数据
        this.bannerList = [
          {
            open_url: '/pages/detail/detail?id=1',
            bannerfile: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp'
          },
          {
            open_url: '/pages/detail/detail?id=2',
            bannerfile: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp'
          }
        ];

        // 模拟活动分类数据
        this.activityTypeList = [
          {
            id: 0,
            name: '全部',
            icon: 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/tabsIcon.webp'
          },
          {
            _id: '1',
            name: '户外运动',
            icon: 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/tabsIcon.webp'
          },
          {
            _id: '2',
            name: '聚会活动',
            icon: 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/tabsIcon.webp'
          },
          {
            _id: '3',
            name: '文化艺术',
            icon: 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/tabsIcon.webp'
          }
        ];

        // 模拟精选活动数据
        // this.recommendActivityData = [
        //   // {
        //   //   _id: 'rec1',
        //   //   name: '周末登山活动',
        //   //   imgs: [{
        //   //     src: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp'
        //   //   }],
        //   //   user_info: Array(15).fill().map((_, i) => ({ id: i })),
        //   //   gift_id: '1'
        //   // },
        //   // {
        //   //   _id: 'rec2',
        //   //   name: '城市摄影交流',
        //   //   imgs: [{
        //   //     src: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp'
        //   //   }],
        //   //   user_info: Array(8).fill().map((_, i) => ({ id: i }))
        //   // },
        //   // {
        //   //   _id: 'rec3',
        //   //   name: '咖啡品鉴会',
        //   //   imgs: [{
        //   //     src: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp'
        //   //   }],
        //   //   user_info: Array(12).fill().map((_, i) => ({ id: i })),
        //   //   gift_id: '2'
        //   // },
        //   // {
        //   //   _id: 'rec4',
        //   //   name: '读书分享会',
        //   //   imgs: [{
        //   //     src: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp'
        //   //   }],
        //   //   user_info: Array(6).fill().map((_, i) => ({ id: i }))
        //   // }
        // ];

        // 模拟活动列表数据
        this.activityData = [
          {
            _id: 'act1',
            name: '春季踏青徒步活动',
            location: '杭州西湖风景区',
            signup_start_time: Date.now() - 86400000, // 昨天开始报名
            signup_end_time: Date.now() + 86400000 * 7, // 一周后结束报名
            start_time: Date.now() + 86400000 * 10, // 10天后开始
            end_time: Date.now() + 86400000 * 11, // 11天后结束
            tags: ['户外', '健康'],
            imgs: [
              { src: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp' },
              { src: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp' }
            ],
            user_info: Array(25).fill().map((_, i) => ({
              id: i,
              user_avatar: 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'
            })),
            gift_id: '1'
          },
          {
            _id: 'act2',
            name: '城市夜跑团',
            location: '上海外滩',
            signup_start_time: Date.now() - 86400000 * 2,
            signup_end_time: Date.now() + 86400000 * 3,
            start_time: Date.now() + 86400000 * 5,
            end_time: Date.now() + 86400000 * 6,
            tags: ['运动', '社交'],
            imgs: [
              { src: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp' }
            ],
            user_info: Array(18).fill().map((_, i) => ({
              id: i,
              user_avatar: 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'
            }))
          },
          {
            _id: 'act3',
            name: '周末烘焙课程',
            location: '北京朝阳区',
            signup_start_time: Date.now() + 86400000, // 明天开始报名
            signup_end_time: Date.now() + 86400000 * 8,
            start_time: Date.now() + 86400000 * 12,
            end_time: Date.now() + 86400000 * 13,
            tags: ['手工', '美食'],
            imgs: [
              { src: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp' }
            ],
            user_info: Array(10).fill().map((_, i) => ({
              id: i,
              user_avatar: 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'
            })),
            gift_id: '3'
          },
          {
            _id: 'act4',
            name: '摄影技巧分享会',
            location: '广州天河区',
            signup_start_time: Date.now() - 86400000 * 10,
            signup_end_time: Date.now() - 86400000 * 3,
            start_time: Date.now() - 86400000 * 2,
            end_time: Date.now() - 86400000 * 1, // 已结束
            tags: ['摄影', '技能'],
            imgs: [
              { src: 'https://gd-hbimg.huaban.com/dbd4180e2ffffcde1bddda12023f91123e4b7f796bb58-R4btzp' }
            ],
            user_info: Array(32).fill().map((_, i) => ({
              id: i,
              user_avatar: 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'
            }))
          }
        ];

        // 设置数据加载完成
        this.dataLoaded = true;
        this.pageStop = true; // 模拟数据已全部加载

        // 触发刷新状态重置
        this.$emit('refreshState', false);

        // 确保tabs组件更新
        this.$nextTick(() => {
          if (this.$refs.tabs && this.$refs.tabs.update) {
            this.$refs.tabs.update();
          }
        });
      },
      // 获取用户当前坐标位置信息
      getUserLocation() {
        // 使用模拟数据，直接设置为全国
        console.log('获取用户位置 - 使用模拟数据');
        this.cityName = '全国';
        // 不需要调用getActivityDataByType，已有模拟数据
      },

      // 获取中国所有城市坐标位置数据
      async getCityFromCoords(lat, lon) {
        // 使用模拟数据，直接返回全国
        console.log('获取城市坐标数据 - 使用模拟数据', lat, lon);
        this.cityName = "全国";
        // 不需要调用getActivityDataByType，已有模拟数据
      },

      // 判断点是否在城市多边形内 - 使用射线法优化
      isPointInPolygon(point, polygon) {
        const [px, py] = point;
        let inside = false;

        for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
          const [xi, yi] = polygon[i];
          const [xj, yj] = polygon[j];

          const intersect = ((yi > py) !== (yj > py)) &&
              (px < (xj - xi) * (py - yi) / (yj - yi) + xi);

          if (intersect) inside = !inside;
        }

        return inside;
      },

      // 遍历所有城市,判断当前点在哪个城市
      findCityByLocation(userLocation, cityData) {
        if (!cityData?.features?.length) return "全国";

        // 使用 find 替代 forEach 提前返回
        const city = cityData.features.find(city => {
          if (city.geometry.type !== "MultiPolygon") return false;

          // 使用 some 提前返回
          return city.geometry.coordinates.some(polygon =>
              this.isPointInPolygon(userLocation, polygon[0])
          );
        });

        return city ? city.properties.name : "全国";
      },
      //获取轮播图数据
      async getBannerData() {
        try{
          const res = await getBannerListApi(this.bannerType);
          if(res.data.code === 200){
            this.bannerList = res.data.data;
            console.log("banner:",this.bannerList);
          }else{
            this.$Toast(res.data.message);
          }
        }catch(e){
          console.log('获取轮播图数据',e);
        }
      },
      //获取活动分类
      async getActivityType() {
        try{
          const res = await getActivityTypeApi();
          if ( res.data.code === 200 ){
            this.activityTypeList = res.data.data;
            
          }else{
            this.$Toast("获取活动分类失败",res.data.message);
          }
        }catch(e){
          console.log("获取活动分类失败：",e);
        }
      },
      //获取活动数据
      async getActivityDataByType(typeId, e) {
        
        console.log("getActivityDataByType被调用",e);
        this.current = e;
        try{
          const res = await getActivityDataByTypeApi(typeId);
          if( res.data.code === 200){
            console.log("响应成功")
            this.activityData = res.data.data;
            this.activityData.map(item =>{
              item.tags = JSON.parse(item.tags);
              item.images = JSON.parse(item.images);
            });
            
           
          }else{
            this.$Toast("获取活动数据失败")
          }
        }catch (e){
         this.$Toast( e || "获取活动数据失败")
        }
      },
      //获取精选活动数据
      async	getRecommendActivityData() {
        try{
          const res = await getRecommendActivityListApi(this.limit);
          if( res.data.code === 200){
            this.recommendActivityData = res.data.data;
            this.$Toast("获取精选活动数据成功")
          }else{
            this.$Toast("获取精选活动数据失败")
          }
        }catch (e){
         this.$Toast( e || "获取精选活动数据失败")
        }


        // 使用模拟数据，已在initMockData中设置
        console.log('获取精选活动数据 - 使用模拟数据');
      },
      //切换tab
      changeTab(e) {
        this.current = e; //当前tab索引
        const typeId = this.activityTypeList[e]?.id;
        this.getActivityDataByType(typeId,e);
      },
      clearIcon() {
        this.searchText = '';
        this.current = 0; //当前tab索引
        console.log('清空搜索');
      },
      async fuzzySearch(e) {
        this.queryData = {
          title: e.detail.value,
        }
        try {
          const res = await getActivityPageApi(this.queryData);
          if ( res.data.code === 200 ) {
            console.log("成功")
          }else {
            this.$Tost("查询活动数据失败");
          }
        } catch (e){
          console.log("查询活动数据异常:",e);
        }
        
        console.log('搜索内容:', e.detail.value);
        // 使用模拟数据，不需要重新请求
      },
      //天气查询接口
      getWeather() {
        // 使用模拟数据，已在initMockData中设置
        console.log('天气查询 - 使用模拟数据');
      },
      // 切换城市
      switchCity() {
        // this.$refs.citySelect.open();
        uni.showToast({
          title: '城市选择功能暂时关闭',
          icon: 'none'
        });
      },
      // 打开活动状态选择弹窗
      openStatePopup() {
        this.$emit('openStatePopup')
      },
      // 切换状态
      switchState(e) {
        this.activeState = e;
        this.stateName = this.stateList[e];
      },
      select(e) {
        //根据城市名称获取活动数据
        this.cityName = e.name;
      },
      // 正则表达式模糊筛选活动地址的城市名称
      filterCityName(location) {
        if (this.cityName == '全国') return true; // 如果没有选择城市，则不过滤
        const reg = new RegExp(this.cityName, 'i');
        return reg.test(location);
      },
      openCalendar() {
        this.$emit('openCalendar')
      },
      calendarConfirm(e) {
        // 把e.range.before（YYYY-MM-DD）和e.range.after（YYYY-MM-DD）转换为时间戳
        this.before = new Date(e.range.before).getTime();
        this.after = new Date(e.range.after).getTime();
        this.timeName = this.$formatDate2(this.before) + ' - ' + this.$formatDate2(this.after);
      },
      calendarCancel() {
        // 用户重置，清除时间戳
        this.before = '';
        this.after = '';
        this.timeName = '时间';
      }
    },
    watch: {
      //监听分页页码
      page(e) {
        if (e != 0) {
          // 使用模拟数据，不需要请求
          console.log('分页变化:', e);
        }
      },
      scrollTop(e) {
        // #ifdef MP-WEIXIN
        let scrollTop = e; // 滚动条距离顶部高度
        // 动态计算 searchWidth，并确保它不超过710
        this.searchWidth = Math.min(
            710, // 最大值
            scrollTop < 50 ? 710 - (Number(scrollTop)) : 710 - (this.menuObject.width * 2)
        );
        // 动态计算 menuButtonObject.top
        const initialTop = this.menuObject.top + this.menuObject.height + 15; // 初始值
        const targetTop = this.menuObject.top; // 目标值
        const scrollThreshold = 50; // 滚动阈值
        this.iconOpacity = 0 + (scrollTop / scrollThreshold); // 透明度从 0 逐渐变为 1
        this.topBacOpacity = 1 + (scrollTop / scrollThreshold); // 透明度从 1 逐渐变为 0

        if (scrollTop > 0 && scrollTop <= scrollThreshold) {
          // 在滚动距离小于阈值时，动态计算 top 值
          this.menuButtonObject.top = initialTop - (scrollTop * (initialTop - targetTop) / scrollThreshold);
          // 动态计算透明度
          this.iconOpacity = 1 - (scrollTop / scrollThreshold); // 透明度从 1 逐渐变为 0
          this.topBacOpacity = 0 + (scrollTop / scrollThreshold); // 透明度从 0 逐渐变为 1
        } else if (scrollTop > scrollThreshold) {
          this.menuButtonObject.top = targetTop;
          this.iconOpacity = 0; // 完全隐藏
          this.topBacOpacity = 1; // 完全显示

        } else {
          this.menuButtonObject.top = initialTop;
          this.iconOpacity = 1; // 完全显示
          this.topBacOpacity = 0; // 完全隐藏
        }
        // #endif
      },
      refresh(e) {
        if (e) {
          // 重置所有数据
          this.dataLoaded = false;
          this.searchText = '';
          this.current = 0; //当前tab索引
          this.activeState = 0; //活动状态
          this.pageStop = false; //分页停止
          this.$emit('resetPage', 0) //重置分页页码
          this.$nextTick(() => { //等待数据更新
            // 重新初始化模拟数据
            this.initMockData();
          })
        }
      }
    },
    computed: {
      userInfo() {
        return store.userInfo //用户信息
      },
      // filteredActivityData() {
      //   // 先按城市筛选
      //   const cityFiltered = this.activityData.filter(item => this.filterCityName(item.location));
      //   // 如果用户选择了时间范围，按报名开始时间筛选，判断是否在选择的时间范围内
      //   const signupFiltered = this.before && this.after ? cityFiltered.filter(item => {
      //     const itemTime = new Date(item.registrationStartTime).getTime();
      //     return itemTime >= this.before && itemTime <= this.after;
      //   }) : cityFiltered;
      //   // 再按状态筛选
      //   return signupFiltered.filter(item => {
      //     if (this.activeState === 0) return true;
      //     if (this.activeState === 1) return item.registrationStartTime < Date.now() && item
      //         .registrationEndTime > Date.now();
      //     if (this.activeState === 2) return item.startTime < Date.now() && item.endTime > Date.now();
      //     if (this.activeState === 3) return item.endTime < Date.now();
      //     return true;
      //   });
      // }
    }
	}
</script>

<style lang="scss">
	.image {
		height: 240rpx;
		width: 100%;
	}

	.img-bg {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		box-sizing: border-box;
	}

	.img-25 {
		width: 25rpx;
		height: 25rpx;
	}

	.img-50 {
		width: 50rpx;
		height: 50rpx;
		border: 4rpx solid #ffffff;
	}

	.image-110 {
		width: 110rpx;
		height: 110rpx;
	}

	.img-210 {
		height: 210rpx;
	}

	.search {
		border-radius: 30px;
		margin: 0 20rpx;
		padding: 20rpx;
		z-index: 98;
		transition: background 0.3s ease-in-out;
		/* #ifndef MP-WEIXIN */
		margin-top: 30rpx;
		padding: 15rpx !important;
		background: #f8f8f8 !important;
		/* #endif */
	}


	.text-tips {
		padding: 5rpx 10rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 20rpx;
		margin-right: 10rpx;
	}

	.state-btn {
		padding: 0 30rpx;
		height: 50rpx;
		line-height: 50rpx;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.state-btn:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
	}

	/* 精选活动栏样式 */
	.recommend-section {
		margin-bottom: 20rpx;
		position: relative;
		overflow: hidden;
	}

	.section-header {
		margin-bottom: 25rpx;
		position: relative;
	}

	.section-title {
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.section-title-text {
		position: relative;
		z-index: 1;
		color: #000000;
	}

	.title-underline {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 10rpx;
		width: 80%;
		background: linear-gradient(to right, rgba(20, 204, 96, 0.3), rgba(20, 204, 96, 0.1));
		border-radius: 10rpx;
		z-index: 0;
	}

	.section-more {
		color: #14cc60;
		font-weight: 500;
		position: relative;
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			bottom: -4rpx;
			left: 0;
			width: 0;
			height: 2rpx;
			background-color: #14cc60;
			transition: width 0.3s ease;
		}

		&:active::after {
			width: 100%;
		}
	}

	.more-icon {
		transition: transform 0.3s ease;
	}

	.section-more:active .more-icon {
		transform: translateX(4rpx);
	}

	.recommend-items {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 10rpx 0;
	}

	.recommend-item {
		flex: 0 0 calc(25% - 15rpx);
		border-radius: 16rpx;
		overflow: hidden;
		background: #ffffff;
		transform: translateY(50rpx);
		opacity: 0;
		animation: slide-up 0.6s forwards ease-out;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		position: relative;

		&:active {
			transform: translateY(-5rpx) scale(0.98);
			box-shadow: 0 15rpx 30rpx rgba(20, 204, 96, 0.15);
		}
	}

	@keyframes slide-up {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.recommend-image-container {
		position: relative;
		width: 100%;
		height: 220rpx;
		overflow: hidden;
	}

	.recommend-image {
		width: 100%;
		height: 100%;
		transition: transform 0.5s ease;
	}

	.recommend-item:hover .recommend-image {
		transform: scale(1.1);
	}

	.image-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60rpx;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
	}

	.gift-badge {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		background: linear-gradient(135deg, #ff5e7e, #ff3c6f);
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 8rpx rgba(255, 79, 79, 0.3);
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			box-shadow: 0 4rpx 8rpx rgba(255, 79, 79, 0.3);
		}

		50% {
			transform: scale(1.3);
			box-shadow: 0 6rpx 12rpx rgba(255, 79, 79, 0.4);
		}

		100% {
			transform: scale(1);
			box-shadow: 0 4rpx 8rpx rgba(255, 79, 79, 0.3);
		}
	}

	.gift-icon {
		color: #ffffff;
		font-size: 28rpx;
	}

	.recommend-info {
		padding: 16rpx;
		position: relative;
	}

	.recommend-name {
		font-size: 26rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		white-space: normal;
	}

	.recommend-count {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: #999;
	}

	.recommend-icon {
		font-size: 24rpx;
		margin-right: 6rpx;
		color: #14cc60;
		animation: bounce 2s infinite;
	}

	@keyframes bounce {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-2rpx);
		}
	}
</style>